import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import {
  TextField,
  Row,
  Col,
  Button,
  Select
} from '@folio/stripes/components';
import css from './style.css';

class SearchForm extends React.Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    initialValues:PropTypes.object,
    dictionary: PropTypes.object,
    cleanSearch:PropTypes.func,
    intl: PropTypes.func
  }

  fieldChange = () => {
    const {
      handleSubmit
    } = this.props;
    this.setState(() => {
      handleSubmit();
    });
  }

  render() {
    const {
      handleSubmit,
      dictionary,
      initialValues,
      cleanSearch,
      intl
    } = this.props;

    const typeOptions = ((dictionary || {}).type || []).map(g => {
      const selected = (initialValues.jsonb || {}).type === g.id;
      return (
        <FormattedMessage key={g.id} id={g.desc}>
          {(message) => <option selected={selected} value={g.id}>{message}</option>}
        </FormattedMessage>
      );
    });

    return (

        <form
          data-test-form-page
          id="form-search"
          onSubmit={handleSubmit}
        >
          <Row>
            <Col className={css.inputCalss}>
              <Field
                component={TextField}
                placeholder={intl.formatMessage({ id: 'ui-party.search.partyLog.username' })}
                name="username"
                onBlur={this.fieldChange}
                onClearField={this.fieldChange}
              />
            </Col>
            <Col className={css.inputCalss}>
              <Field
                component={TextField}
                placeholder={intl.formatMessage({ id: 'ui-party.search.partyLog.describe' })}
                name="describe"
                onBlur={this.fieldChange}
                onClearField={this.fieldChange}
              />
            </Col>
            <Col className={css.inputCalss}>
              <Field
                component={Select}
                name="type"
                selectClass={css.selectWidth}
                onChange={this.fieldChange}
              >
                {typeOptions}
              </Field>
            </Col>
            <Col className={css.inputCalss}>
              <Button type="submit">
                <FormattedMessage id="ui-party.search" />
              </Button>
              {/* <Button onClick={cleanSearch}>重置</Button> */}
            </Col>
          </Row>
        </form>

    );
  }
}
export default injectIntl(reduxForm({
  form: 'SystemLogSearchForm',
  navigationCheck: true,
  enableReinitialize: true,
})(SearchForm));
